<template>
<div id="app">
  <!-- Detail页面不会被缓存，每次进来都会发送请求exclude -->
  <transition :name="transitionName">
  <keep-alive exclude="Detail,Home">
      <router-view class="Router"/>
  </keep-alive>
</transition>
</div>
</template>

<script>
export default {
  name: 'App',
  data(){
      return {
          transitionName:''
      }
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
        //设置动画名称
        this.transitionName = 'slide-left';
      }else{
        this.transitionName = 'slide-right';
      }
    }
  },
  activated: function () {
    this.$setgoindex()
  }
}
</script>

<style lang="stylus" scope>
.Router {
     position: absolute;
     top: 0
     bottom: 0
     width: 100%;
     transition: all .5s ease;
}

.slide-left-enter,
 .slide-right-leave-active {
     opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
     opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
}
</style>
